<template>
  <div class="index-wrap">
    <div class="left-nav">
      <v-navpanel :cssObj="{width: '270px'}"></v-navpanel>
    </div>
    <div class="right-content">
      <v-slide :slides="slideDatas" :inv="3000"></v-slide>
      <div class="border-items">
        <div class="border-item" v-for="info in borderInfos">
          <v-board :borderInfo="info"></v-board>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import navpanel from '@/components/navpanel/navpanel';
  import slide from '@/components/slide/slide';
  import board from '@/components/board/board';
  export default{
    data () {
      return {
        wins: {
          isLoginWin: false,
          isAboutWin: false
        },
        slideDatas: [{
          title: '游泳',
          src: require('../assets/333.png')
        }, {
          title: '深蓝',
          src: require('../assets/test.png')
        }],
        borderInfos: [{
          title: '开放产品',
          description: '开放产品是一款开放产品',
          to: {
            name: 'publish',
            params: {category: 'publish'}
          }
        }, {
          title: '品牌营销',
          description: '品牌营销帮助你的产品更好地找到定位',
          to: {
            name: 'prediction',
            params: {category: 'prediction'}
          }
        }]
      };
    },
    methods: {
      showWin (win) {
        this.wins[win] = true;
      },
      hideWin (win) {
        this.wins[win] = false;
      }
    },
    components: {
      'v-navpanel': navpanel,
      'v-slide': slide,
      'v-board': board
    }
  };
</script>
<style scoped>
  .index-wrap{
    display: flex;
    width: 1200px;
    margin: 0 auto;
  }
  .index-wrap>
  .left-nav{
    flex-basis: 300px;
    box-sizing: border-box;
    padding: 15px;
  }

  .index-wrap>
  .right-content{
    /*flex-basis: 900px;*/
    width: 900px;
  }

  .index-wrap>
  .right-content>
  .border-items{
    font-size: 0;
  }

  .index-wrap>
  .right-content>
  .border-items>
  .border-item{
    display: inline-block;
    padding-bottom: 15px;
    font-size: 15px;
  }

  .index-wrap>
  .right-content>
  .border-items>
  .border-item:nth-child(2n+1){
    padding-right: 10px;
  }

  .index-wrap>
  .right-content>
  .border-items>
  .border-item:nth-child(2n){
    padding-left: 10px;
  }
</style>

